<template>
	<ls-page title="">
		<view class="centerCoin-container">
			<view class="centerCoin-container-header">
				<view class="container-header-value">{{ allCoins || 0 }}</view>
				<view class="container-header-title">金币余额</view>
			</view>
			<scroll-view class="records-container-main" @scrolltolower="scrollToLower" :scroll-y="true" lower-threshold="300">
				<view class="centerCoin-container-main" v-for="(v, k) in pointsModal.history" :key="k">
					<view class="container-main-h2">{{ v.date }}</view>

					<view class="container-main-item" v-for="(vi, ki) in v.children" :key="ki">
						<view class="main-item-upper">{{ vi.operTypeName }}</view>

						<view class="main-item-center" :style="'color:' + (vi.opreCoins > 0 ? '#212121' : '#FF3333')">
							<text>{{ vi.opreCoins > 0 ? '+' : '' }}</text>
							{{ vi.opreCoins }}
						</view>

						<view class="main-item-below">{{ vi.datetime }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</ls-page>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'
	const pointsModal = ref([])
	const allCoins = ref(0)
	const postForm = ref({
		memberCode: '',
		pageSize: 500,
		pageIndex: 1,
	})
	const initData = async() => {
		// console.log(app.global.userInfo);
		// 获取记录
		postForm.value.memberCode = uni.getStorageSync('cardInfo').code
		let sendModal = {
			"functionName": "MemberTransactionCoinsRecord_H5",
			"contentData": postForm.value
		}
		const res = await HFiveMemberAppObjProcess(sendModal)
		console.log(res);

		if (postForm.value.pageIndex === 1) {
			pointsModal.value =  res
		} else {
			pointsModal.value = [...res.history, ...pointsModal.value.history]
		}
		allCoins.value = res.currentCoins 
		
	}
	initData()
	// 上拉加载更多
	const scrollToLower = () => {
		// loadMore();
		console.log(111111111111111);
		// if (postForm.value.pageSize * postForm.value.pageIndex >= pointsModal.value.totalCount) return
		postForm.value.pageIndex++
		initData()
	}

	
	
</script>

<style lang="scss" scoped>
	.centerCoin-container {
		width: 100%;
		height: 100%;
		overflow: scroll;
		box-sizing: border-box;
		padding: 0rpx 24rpx 40rpx;

		.centerCoin-container-header {
			background: #212121;
			border-radius: 16rpx;
			text-align: center;
			padding: 60rpx 0 40rpx 0;
			// margin-bottom: 30rpx;
			// margin: 0 auto;
			position: fixed;
			width: 702rpx;
			// width: 100%;
			z-index: 10;
			.container-header-value {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #fefefe;
				line-height: 48rpx;
				padding-bottom: 40rpx;
			}

			.container-header-title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 24rpx;
			}
		}
		.records-container-main{
			padding-top: 220rpx;
			// height: 100%;
			overflow: hidden;
			.centerCoin-container-main {
				padding: 30rpx 0 30rpx;
			
				.container-main-h2 {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #212121;
					line-height: 32rpx;
					margin-bottom: 34rpx;
				}
			
				.container-main-item {
					background: #ffffff;
					border-radius: 16rpx;
					padding: 32rpx 24rpx;
					display: flex;
					flex-direction: column;
					margin-bottom: 20rpx;
			
					.main-item-upper {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #212121;
						line-height: 32rpx;
					}
			
					.main-item-center {
						align-self: flex-end;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #ff3333;
						line-height: 32rpx;
					}
			
					.main-item-below {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						line-height: 24rpx;
					}
				}
			}
		}
		
	}
</style>